<template>
  <div style="padding-top: 35px;">
    <el-steps :active="activeStep" finish-status="finish" align-center>
      <el-step title="退租申请" description="是否提出退租申请" :status="statusList[0]||'process'"
        :icon="activeStep == 0?'el-icon-s-promotion':''"></el-step>
      <el-step title="工程备案" description="拆除复原工程是否进行工程备案" :status="statusList[1]||'process'"
        :icon="activeStep == 1?'el-icon-s-promotion':''"></el-step>
      <el-step title="施工方案" description="是否提交有资质单位施工方案" :status="statusList[2]||'process'"
        :icon="activeStep == 2?'el-icon-s-promotion':''"></el-step>

      <el-step title="施工监管" description="施工过程是否监管" :status="statusList[3]||'process'"
        :icon="activeStep == 3?'el-icon-s-promotion':''"></el-step>
      <el-step title="营业执照注销" description="营业执照手否从租赁地址注消" :status="statusList[4]||'process'"
        :icon="activeStep == 4?'el-icon-s-promotion':''"></el-step>
      <el-step title="房屋交接" description="房屋交接" :status="statusList[5]||'process'"
        :icon="activeStep == 5?'el-icon-s-promotion':''"></el-step>

    </el-steps>

    <div style="display: flex;align-items: center;flex-direction: column;">
      <LifeDetails :serverData="detail1" v-show="activeStep == 0" :isCurrent='currStage == 0'
        @refresh="loadLiftDetails" />
      <LifeDetails :serverData="detail2" v-show="activeStep == 1" :isCurrent='currStage == 1'
        @refresh="loadLiftDetails" />
      <LifeDetails :serverData="detail3" v-show="activeStep == 2" :isCurrent='currStage == 2'
        @refresh="loadLiftDetails" />
      <LifeDetails :serverData="detail4" v-show="activeStep == 3" :isCurrent='currStage == 3'
        @refresh="loadLiftDetails" />
      <LifeDetails :serverData="detail5" v-show="activeStep == 4" :isCurrent='currStage == 4'
        @refresh="loadLiftDetails" />
      <LifeDetails :serverData="detail6" v-show="activeStep == 5" :isCurrent='currStage == 5'
        @refresh="loadLiftDetails" />

    </div>
    <div style="display: flex;align-items: center;justify-content: center;margin-top: 15px;">
      <el-button @click="clickPre" type="success" icon="el-icon-back" size="mini"
        style="width: auto;"></el-button>
      <el-button type="primary" @click="clickNext" icon="el-icon-right" size="mini"
        style="width: auto;"></el-button>

    </div>
  </div>
</template>
<script>
import { queryCompLifeDetailList, uploadFile } from '@/service/compLifeDetail';

import { queryCompLife } from '@/service/compLife';

import LifeDetails from './components/LifeDetails.vue';

export default {
  components: { LifeDetails },
  data() {
    return {
      processStatus: 'success',
      activeStep: 0,
      currStage: 0,
      compName: '',
      formData: {},
      detail1: {},
      detail2: {},
      detail3: {},
      detail4: {},
      detail5: {},
      detail6: {},
      statusList: [],
    };
  },

  methods: {
    clickPre() {
      const activeStepTemp = (this.activeStep - 1 + 6) % 6;
      if (activeStepTemp > this.currStage) {
        return;
      }
      this.activeStep = activeStepTemp;
    },

    clickNext() {
      const activeStepTemp = (this.activeStep + 1) % 6;
      if (activeStepTemp > this.currStage) {
        return;
      }
      this.activeStep = activeStepTemp;
    },

    async loadLiftDetails() {
      const res = await queryCompLife({
        compName: this.compName,
        lifeType: this.lifeType,
      });

      if (res.data) {
        this.currStage = res.data.stage;
        this.activeStep = res.data.stage;
        console.log('this.activeStep', this.activeStep);

        for (let i = 0; i < 6; i++) {
          if (this.currStage == i) {
            if (res.data.isNg == 'Y') {
              this.statusList.push('error');
            } else {
              this.statusList.push('wait');
            }
          } else if (this.currStage > i) {
            this.statusList.push('success');
          } else {
            this.statusList.push('wait');
          }
        }

        this.detail1 =
          res.data.detailList.filter((item) => item.stage == 0)[0] || {};
        this.detail2 =
          res.data.detailList.filter((item) => item.stage == 0)[1] || {};
        this.detail3 =
          res.data.detailList.filter((item) => item.stage == 0)[2] || {};
        this.detail4 =
          res.data.detailList.filter((item) => item.stage == 0)[3] || {};
        this.detail5 =
          res.data.detailList.filter((item) => item.stage == 0)[4] || {};
        this.detail6 =
          res.data.detailList.filter((item) => item.stage == 0)[5] || {};

        const LifeDetails = [
          this.detail1,
          this.detail2,
          this.detail3,
          this.detail4,
          this.detail5,
          this.detail6,
        ];
        for (let index = 0; index < LifeDetails.length; index++) {
          const element = LifeDetails[index];
          element.compName = res.data.compName;
        }
        console.log('this.detail1', this.detail1);
      }
    },
  },
  mounted() {
    this.compName = this.$route.params.compName;
    this.lifeType = this.$route.params.lifeType;
    this.loadLiftDetails();
  },
};
</script>
<style scoped>
>>> .el-form-item__label {
  color: aliceblue;
  font-size: 14px;
}
</style>
